<template>
  <div>
    <div class="top">
      <br>
      <el-form :inline="true" class="demo-form-inline" style="margin-left:40px ;">
        <el-form-item label="员工账号:">
          <el-input size="medium" placeholder="请输入员工账号" />
        </el-form-item>
        <el-form-item label="员工姓名:" style="margin-left: 100px; margin-right: 100px;">
          <el-input size="medium" placeholder="请输入员工姓名" />
        </el-form-item>
        <el-form-item label="工作模式:" style="margin-left:13px ;">
          <el-select size="medium" placeholder="请选择工作模式">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <br>

        <span class="demonstration">月份:</span>
        <el-date-picker
          v-model="value2"
          style="margin-left: 30px;"
          size="medium"
          type="month"
          placeholder="选择月"
        />

        <el-form-item label="所属机构:" style="margin-left: 80px;">
          <el-select
            v-model="form.agentId"
            placeholder="请选择所属机构"
            style="width:100%"
            clearable
            @change="handleChange"
          />
        </el-form-item>
        <el-button size="medium" type="danger" style="margin-left: 100px;">搜索</el-button>
        <el-button size="medium">重置</el-button>

      </el-form>
    </div>
    <div class="below">
      <el-button size="medium" type="danger" style="margin-left: 20px; margin-top: 20px;" @click="SetButton">排班设置</el-button>
      <el-button size="medium" type="danger" plain>绑定排班</el-button>
      <br>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 10px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="员工账号"
          width="120"
          prop="employeeNumber"
        />
        <el-table-column
          prop="name"
          label="员工姓名"
          width="120"
        />
        <el-table-column
          prop="phone"
          label="员工电话"
          width="120"
        />
        <el-table-column
          prop="userType"
          label="员工角色"
          width="120"
        >
          <template v-slot="{row}">
            <span v-if="row.userType===3"> 司机</span>
            <span v-else-if="row.userType===2"> 快递员</span>
            <span v-else> 员工</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="workPatternName"
          label="当前工作模式"
          width="120"
        >
          <el-table-column
            v-for="(item,index) in workSchedulesList.length ? workSchedulesList[0].workSchedules:[]"
            :key="item.index"

            :label="String(index+1)"
            align="center"
          >
            <template v-slot="{row}">
              <div>
                {{ row.workPatternName?row.workSchedules[index]?'上':'休':'无' }}
              </div>
            </template>
          </el-table-column></el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-pagination
        :current-page="pageParams.page * 1"
        :page-sizes="[10,20,50,100]"
        :page-size="pageParams.pageSize * 1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>

  </div>
</template>

<script>
import { workList } from '@/api/workforceManagement'
import { treeList } from '@/api/deliveryman'

export default {
  name: 'WorkforceManagement',
  data() {
    return {

      // 树形控件数据
      defaultProps: {
        label: 'name',
        children: 'children',
        value: '',
        emitPath: false
      },
      treeData: [],
      label: '',
      selectOption: '',
      form: {
        account: '',
        agentId: -1 && '',
        name: '',
        phone: ''
      },
      workSchedulesList: [], // 排班日期列表

      tableData: [],
      pageParams: {
        pageSize: '10',
        page: '1',
        total: 0
      },
      multipleSelection: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await workList(this.pageParams)
      console.log(res.data.data.items)
      this.tableData = res.data.data.items
      this.workSchedulesList = res.data.data.items || []
    },
    // 分页器
    handleSizeChange(val) {
      this.pageParams.pageSize = val + ''
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val + ''
      this.getList()
    },
    SetButton() {
      console.log(321)
      this.$router.push('/set')
    },
    // 获取树状机构信息
    async getSelect() {
      const result = await treeList()
      this.treeData = JSON.parse(result.data.data)
      console.log(JSON.parse(result.data.data))
    }
  }

}
</script>

<style>
.below{
  background-color: #fff;
}
</style>
